<template>
  <div class="full c">
    <!-- Header -->
    <div class="w_full h_60 lh_50">
      <Header :headerName="headerName" :headerStyle="headerStyle" />
    </div>

    <!-- body -->
    <div class="w_full h_full-60 flex_row_around pb_15">
      <div class="w_32_p h_full flex_column_between">
        <div class="w_full h_34_p box_bgi p_10">
          <DataChart title="牲畜存栏免疫统计" path="" chartType="双柱图" :chartData="chartData1" filterText="" filterId=""
            :filterList="[]" :isShowUnit="true" :isShowFilterIcon="false" :isShowFullIcon="false" />
        </div>
        <div class="w_full h_30_p box_bgi p_10">
          <DataChart title="牲畜育种统计" path='' chartType="环状图" :chartData="chartData2" filterText="" :filterList="[]"
            :isShowUnit="false" :isShowFilterIcon="false" :isShowFullIcon="false" />
        </div>
        <div class="w_full h_34_p box_bgi p_10">
          <DataChart title="农作物播种产量统计" path='' chartType="双柱图" :chartData="chartData3" filterText="" :filterList="[]"
            :isShowUnit="false" :isShowFilterIcon="false" :isShowFullIcon="false" />
        </div>
      </div>

      <!-- 2 -->
      <div class="w_32_p h_full flex_column_between">
        <!-- <div class="w_full h_49_p">
          <img class="h_full border_radius_10 cursor object_fit_cover" src="../assets/images/img/ba-la-ga-er-gao-le.jpg"
            alt="">
        </div>
        <div class="w_full h_49_p box_bgi p_10">
          <DataChart title="常驻人口" path='' chartType="柱状图" :chartData="chartData4" filterText="" :filterList="[]"
            :isShowUnit="true" :isShowFilterIcon="false" :isShowFullIcon="false" />
        </div> -->

        <div class="full box_bgi overflow_y_auto scroll_box color_fff p_20" v-html="villageHtml"></div>
      </div>

      <!-- 2 -->
      <div class="w_32_p h_full flex_column_between">
        <div class="full box_bgi p_10">
          <div class="chart_title">牧户信息</div>
          <div class="w_full h_full-30 scroll_box mt_10">
            <div class="w_full h_20_p p_10 border_box flex_row_between mb_10 bgc_3E4453 border_radius_10"
              v-for="(item, index) in muHuList" :key="index" @click="clickMuHuName(item)">
              <!-- 头像 -->
              <div class="w_30_p p_5 border_radius_10">
                <img class="h_full border_radius_10 cursor object_fit_cover" src="../assets/images/img/def-user.png"
                  alt="">
              </div>

              <!-- 文字信息 -->
              <div class="info_box w_70_p flex_column_start gap_10 pl_20 cursor">
                <div class="text_1 color_fff">牧户姓名: <span class="main_color">{{ item.nickName }}</span></div>
                <div class="text_1 color_fff">电话: <span class="font_number">{{ item.phone }}</span></div>
                <div class="text_1 color_fff">性别: {{ item.gender }} </div>
                <div class="text_1 color_fff">其他: {{ item.address }} </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="js">
import Header from '../common/Header.vue'
import DataChart from '../components/data-chart/index.vue'
import { ref, reactive, computed, onMounted, watch, provide, nextTick } from 'vue'
import screenfull from 'screenfull'

import { getVillageDetail } from '../api/index.js'

import { useRoute, useRouter } from 'vue-router'
const route = useRoute()
const router = useRouter()

let townName = route.query.townName
let villageId = route.query.villageId
let villageName = route.query.villageName

const headerName = ref(null)
headerName.value = '乌审旗 ' + townName + ' ' + villageName
const headerStyle = reactive({
  color: '#00A295',
  fontWeight: 500, fontSize: '20px'
})

const villageHtml = ref(null)

const content = ref('巴拉嘎尔高勒镇，隶属于内蒙古自治区锡林郭勒盟西乌珠穆沁旗，地处西乌珠穆沁旗中部，东与巴彦花镇相望，南与浩勒图高勒镇为邻，西与吉仁高勒镇相邻，北与巴彦胡舒苏木接壤，区域总面积202平方千米。')
const muHuList = reactive([
  {
    nickName: '巴特尔',
    phone: '121343333333',
    gender: '1',
    address: ''
  },
  {
    nickName: '巴音',
    phone: '121343333333',
    gender: '1',
    address: ''
  },
  {
    nickName: '布和',
    phone: '121343333333',
    gender: '1',
    address: ''
  },
  {
    nickName: '那仁',
    phone: '121343333333',
    gender: '1',
    address: ''
  },
  {
    nickName: '牧仁',
    phone: '121343333333',
    gender: '1',
    address: ''
  },
  {
    nickName: '朝拉',
    phone: '121343333333',
    gender: '1',
    address: ''
  }
])

let chartData1 = reactive({})
let chartData2 = reactive({})
let chartData3 = reactive({})
let chartData4 = reactive({})

onMounted(() => {
  initChart()

  // 获取 嘎查村 详情
  getVillageDetailData(villageId)
})

function initChart() {
  chartData1.x = ['牛', '羊', '马', '猪', '犬', '禽'].reverse()
  chartData1.data1 = {
    name: '存栏',
    data: [2334, 4353, 2324, 344, 243, 2134].reverse()
  }
  chartData1.data2 = {
    name: '免疫',
    data: [1764, 3245, 1124, 143, 180, 1289].reverse()
  }

  chartData2.unit = ''
  chartData2.data = [
    { name: '牛', value: 1345 },
    { name: '山羊', value: 3149 },
    { name: '绵羊', value: 2314 },
    { name: '猪', value: 335 },
    { name: '马', value: 185 },
  ]

  chartData3.x = ['粮食', '油料', '蔬菜', '瓜果类', '糖料', '青饲料']
  chartData3.data1 = {
    name: '播种面积（亩）',
    data: [4503, 7205, 1648, 885, 1300, 38102]
  }
  chartData3.data2 = {
    name: '产量（吨）',
    data: [829.5, 646.3, 4815.5, 1447.8, 3550, 30134]
  }

  chartData4.unit = '人'
  chartData4.x = ['2018', '2019', '2020', '2021', '2022', '2023'].reverse()
  chartData4.y = [3234, 3465, 2834, 3035, 3198, 3390, 3459].reverse()
}

// 获取 嘎查村 详情
async function getVillageDetailData(villageId) {
  let res = await getVillageDetail(villageId)

  console.log('嘎查村 详情 : ', res.data);

  villageHtml.value = res.data.details
}

function clickMuHuName(item) {
  router.push(`/muHuPage`)
}

</script>

<style>
.c {
  background-color: #0F1427;
}
</style>